<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="首页轮播图" name="first">
        <router-link to="/fabubanner">
          <el-button type="primary">添加轮播图</el-button>
        </router-link>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="index" prop="id" width="50" label="序号"></el-table-column>
          <el-table-column label="图片">
            <template slot-scope="scope">
              <img :src="scope.row.video_url" style="height: 50px" />
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="详情" width="120">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="markDetailsTo(scope.row.Id)"
                type="text"
                size="small"
              >详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="历史轮播图" name="second">
        <div class="scall">发现页轮播图（最多10张）</div>
        <router-link to="/fabubanner">
          <el-button type="primary" style="margin-top:20px">添加轮播图</el-button>
        </router-link>
        <div class="imgsde" style="width:100%;height:100vh; margin-top:40px;overflow: hidden;">
          <div
            class="imgsde1"
            style="width:275px;height:200px;background-color:#b5b8bb;margin-top:10px;float:left;margin-left:20px"
          >
            <img
              src="http://t9.baidu.com/it/u=29311073,358824429&fm=79&app=86&f=JPEG?w=1280&h=854"
              alt
              style="width:275px;height:145px;"
            />
            <el-button>右移</el-button>
            <el-button type="primary">编辑</el-button>
            <el-button type="success">删除</el-button>
          </div>
          <div
            class="imgsde1"
            style="width:275px;height:200px;background-color:#b5b8bb;margin-top:10px;float:left;margin-left:20px"
          >
            <img
              src="http://t9.baidu.com/it/u=29311073,358824429&fm=79&app=86&f=JPEG?w=1280&h=854"
              alt
              style="width:275px;height:145px;"
            />
            <el-button>右移</el-button>
            <el-button type="primary">编辑</el-button>
            <el-button type="success">删除</el-button>
          </div>
          <div
            class="imgsde1"
            style="width:275px;height:200px;background-color:#b5b8bb;margin-top:10px;float:left;margin-left:20px"
          >
            <img
              src="http://t9.baidu.com/it/u=29311073,358824429&fm=79&app=86&f=JPEG?w=1280&h=854"
              alt
              style="width:275px;height:145px;"
            />
            <el-button>右移</el-button>
            <el-button type="primary">编辑</el-button>
            <el-button type="success">删除</el-button>
          </div>
          <div
            class="imgsde1"
            style="width:275px;height:200px;background-color:#b5b8bb;margin-top:10px;float:left;margin-left:20px"
          >
            <img
              src="http://t9.baidu.com/it/u=29311073,358824429&fm=79&app=86&f=JPEG?w=1280&h=854"
              alt
              style="width:275px;height:145px;"
            />
            <el-button>右移</el-button>
            <el-button type="primary">编辑</el-button>
            <el-button type="success">删除</el-button>
          </div>
          <div
            class="imgsde1"
            style="width:275px;height:200px;background-color:#b5b8bb;margin-top:10px;float:left;margin-left:20px"
          >
            <img
              src="http://t9.baidu.com/it/u=29311073,358824429&fm=79&app=86&f=JPEG?w=1280&h=854"
              alt
              style="width:275px;height:145px;"
            />
            <el-button>右移</el-button>
            <el-button type="primary">编辑</el-button>
            <el-button type="success">删除</el-button>
          </div>
          <div
            class="imgsde1"
            style="width:275px;height:200px;background-color:#b5b8bb;margin-top:10px;float:left;margin-left:20px"
          >
            <img
              src="http://t9.baidu.com/it/u=29311073,358824429&fm=79&app=86&f=JPEG?w=1280&h=854"
              alt
              style="width:275px;height:145px;"
            />
            <el-button>右移</el-button>
            <el-button type="primary">编辑</el-button>
            <el-button type="success">删除</el-button>
          </div>
          <div
            class="imgsde1"
            style="width:275px;height:200px;background-color:#b5b8bb;margin-top:10px;float:left;margin-left:20px"
          >
            <img
              src="http://t9.baidu.com/it/u=29311073,358824429&fm=79&app=86&f=JPEG?w=1280&h=854"
              alt
              style="width:275px;height:145px;"
            />
            <el-button>右移</el-button>
            <el-button type="primary">编辑</el-button>
            <el-button type="success">删除</el-button>
          </div>
          <div
            class="imgsde1"
            style="width:275px;height:200px;background-color:#b5b8bb;margin-top:10px;float:left;margin-left:20px"
          >
            <img
              src="http://t9.baidu.com/it/u=29311073,358824429&fm=79&app=86&f=JPEG?w=1280&h=854"
              alt
              style="width:275px;height:145px;"
            />
            <el-button>右移</el-button>
            <el-button type="primary">编辑</el-button>
            <el-button type="success">删除</el-button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  props: {},
  data() {
    return {
      activeName: "first",
      tableData: [
        // {
        //   date: "2016-05-02",
        //   name: "王小虎",
        //   address: "上海市普陀区金沙江路 1518 弄"
        // },
        // {
        //   date: "2016-05-04",
        //   name: "王小虎",
        //   address: "上海市普陀区金沙江路 1517 弄"
        // },
        // {
        //   date: "2016-05-01",
        //   name: "王小虎",
        //   address: "上海市普陀区金沙江路 1519 弄"
        // },
        // {
        //   date: "2016-05-03",
        //   name: "王小虎",
        //   address: "上海市普陀区金沙江路 1516 弄"
        // }
      ]
    };
  },

  watch: {},
  mounted() {
    this.axios({
      method: "post",
      url: "/wrd/lb",
      params: {}
    }).then(res => {
      console.log(res);
      this.tableData = res.data.data;
      console.log(this.tableData);
    });
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  }
};
</script>

<style  scoped>
</style>